import { PureComponent } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Modal,
	DatePicker,
	Button,
  message
} from 'antd';
import styles from './ProCheckedSearchList.less';
import memberShip from '@/assets/member_ship.png';
import memberShip2 from '@/assets/member_ship2.png';
import ExportJsonExcel from 'js-export-excel';
import printJS from 'print-js';
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

@Form.create()
class MemberShipModal extends PureComponent {

	constructor(props) {
	    super(props);
	    this.state = {

	    }
	}

  handleCheck = () => {
      Modal.success({
          title: '校验成功',
          okText: '确认',
          centered: true,
          onOk() {

          },
          onCancel() {},
      });
  }

  //导出excel
  downloadExl = () => {
    	var option={};
    	let dataTable = [];
  	  option.fileName = '花名册'
  	  option.datas=[
  	    {
  	      sheetData:dataTable,
  	      sheetName:'花名册',
  	      sheetHeader:['左括号','信息项','关系','查询值','右括号','逻辑符'],
  	      columnWidths: [10,10,10,10,10,10],
  	      columnHeights: [10,10,10,10,10,10]
  	    }
  	  ];

  	  var toExcel = new ExportJsonExcel(option);
  	  toExcel.saveExcel();
  }

  //打印
  print = () => {
    printJS({
      printable: 'print',
      type: 'html'
    });
  }


	okHandle = () => {
		const { form,handleAddByMembership } = this.props;
		form.validateFields((err, fieldsValue) => {
			if (err) return;
			form.resetFields();
			handleAddByMembership();
		});
	};

  render() {
  		const {
			modalVisibleByMembership,
			form,
			handleModalVisibleByMembership,
		} = this.props;
return (
    <Modal
width={900}
centered
destroyOnClose
title="人员花名册"
visible={modalVisibleByMembership}
onCancel={() => handleModalVisibleByMembership()}
footer={<Button key="back" onClick = {() => handleModalVisibleByMembership(false)}>取消</Button>}
>
<div style={{width: '100%',height: '520px',overflow: 'auto',textAlign: 'center',position: 'relative'}}>,
  <Button type="primary" style={{marginRight: '10px',float: 'right'}} onClick={this.print}>
  打印
  </Button>
  <Button type="primary" style={{marginRight: '10px',float: 'right'}} onClick={this.downloadExl}>
  导出
  </Button>
  <Button type="primary" style={{marginRight: '10px',float: 'right'}} onClick={() => this.handleCheck()}>
  校验
  </Button>
  <span id="print">
      <img alt="" src={memberShip} style={{width: '80%',marginTop: '20px',verticalAlign: 'midden'}}/>
      <img alt="" src={memberShip2} style={{width: '80%',verticalAlign: 'midden'}}/>
  </span>

</div>
</Modal>
);
  }

}

export default MemberShipModal;
